<template>
  <div class="app-projectinfo-header">
    <span class="caption-info">{{ project.name ? project.name : "项目" }}</span>
    <v-btn
      depressed
      small
      color="white"
      class="float-right"
      @click="toProjectSetting"
    >
      <i class="fa fa-gear fa-lg"></i>
      <span style="color:gray">设置</span>
    </v-btn>
    <div class="project-desc" v-if="project.desc">
      <span class="caption-desc">{{ project.desc }}</span>
    </div>
    <div slot="title" class="member-info">
      <div class="pl-5 pr-5">
        <v-avatar
          :color="$util.getColorByPersonName(item.label ? item.label : item.value)"
          size="25"
          style="margin-right:2px"
          v-for="(item, index) in taskTeamMemberMetaShow"
          :key="index"
          v-if="index + 1 < 20"
          class="projectTeam"
          @click="toPrjTeam"
        >
          <!-- <span v-if="item.icon">
            <img :src="item.icon" />
          </span> -->
          <span style="color:white">
            {{
              item.label
                ? item.label.substr(item.label.length - 1)
                : item.value.substr(item.value.length - 1)
            }}
          </span>
        </v-avatar>
        <v-chip
          v-if="taskTeamMemberMetaShow.length > 19"
          class="membersNum ml-2"
          small
          @click="toPrjTeam"
          >共{{ taskTeamMemberMetaShow.length }}人</v-chip
        >
        <v-btn small outlined style="margin-left:10px;border:1px solid #f0f0f0;"
          @click="toPrjTeam('editMember')">添加成员</v-btn
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Model,
  Emit,
  Watch,
  Provide,
} from "vue-property-decorator";

import "./app-projectinfo-header.less";
import ProjectService from "@/service/project/project-service";
import UsersService from "@/service/user/user-service";
import CodeListService from "@/codelist/codelist-service";
import ProjectTeamServiceBase from "@service/project-team/project-team-service-base";
import { Subject, Subscription } from "rxjs";

@Component({})
export default class AppProjectInfoHeader extends Vue {
  /**
   * 数据集
   *
   * @type {any}
   * @memberof AppProjectinfoHeader
   */
  public data: any = [];
  /**
   * 应用上下文
   *
   * @type {any}
   * @memberof AppProjectinfoHeader
   */
  @Prop() public context: any;

  /**
   * 视图通讯对象
   *
   * @type {Subject<ViewState>}
   * @memberof AppProjectinfoHeader
   */
  @Prop() public viewState!: Subject<ViewState>;

  /**
   * 视图状态事件
   *
   * @public
   * @type {(Subscription | undefined)}
   * @memberof Projectinfo_headerBase
   */
  public viewStateEvent: Subscription | undefined;

  /**
   * 项目信息
   *
   * @type {any}
   * @memberof AppProjectinfoHeader
   */
  @Prop() public project: any;

  /**
   * 项目成员清单
   *
   * @type {any}
   * @memberof AppProjectinfoHeader
   */
  public taskTeamMemberMetaShow: any = [];

  /**
   * 用户列表数据集
   *
   * * @type {any}
   * @memberof AppProjectinfoHeader
   */
  public userslist: any;

  /**
   * 代码表服务对象
   *
   * @type {CodeListService}
   * @memberof AppVuetifyAutocompletes
   */
  public codeListService: CodeListService = new CodeListService({
    $store: this.$store,
  });

  /**
   * 项目团队对象
   *
   * @type {ProjectTeamServiceBase}
   * @memberof AppProjectinfoHeader
   */
  public projectTeamServiceBase: ProjectTeamServiceBase = new ProjectTeamServiceBase();

  /**
   *分页对象
   *
   *@memberof AppProjectinfoHeader
   */
  private page: any = {
    size: 1000,
    page: 0,
  };

  /**
   * 跳转到项目设置页面
   *
   * @memberof AppProjectinfoHeader
   */
  public toProjectSetting() {
    this.$emit("projectinfoHeader", "toProjectSetting");
  }

  /**
   * Vue声明周期，组件创建完毕
   *
   * @memberof AppProjectinfoHeader
   */
  public created() {
    this.getCodeList();
    this.$emit("projectinfoHeader", "created");
  }



  /**
   * 获取动态代码表UserRealName
   *
   * @memberof AppProjectinfoHeader
   */
  public async getCodeList() {
    this.userslist = [];
    let codeList: any = this.codeListService.getItems("UserRealName");
    await codeList
      .then((items: any) => {
        if (items && items.length > 0) {
          //this.userslist.push(...items);
          this.userslist = items;
        }
      })
      .catch((error: any) => {
        console.log(error);
      });
    await this.getTaskTeam();
  }

  /**
   * 获取项目团队成员清单
   *
   * @memberof AppProjectinfoHeader
   */
  public async getTaskTeam() {
    let context: any = {};
    let params: any = {
      srfparentdename: "Project",
      srfparentkey: this.context.project,
      project: this.context.project,
      multiple: 0,
      n_root_eq: this.context.project,
    };

    Object.assign(params, this.page);
    await this.projectTeamServiceBase
      .FetchDefault(context, params, true)
      .then((response: any) => {
        if (response && response.status === 200) {
          if (response.data) {
            this.taskTeamMemberMetaShow = [];
            for (let i = 0; i < response.data.length; i++) {
              let account = response.data[i].account;
              let realname = response.data[i].account;
              let commiter = response.data[i].commiter;
              this.userslist.forEach((useritme: any) => {
                if (Object.is(useritme.value, account)) {
                  realname = useritme.label;
                }
              });
              let member: any = {
                value: account,
                label: realname,
                commiter: commiter,
              };

              this.taskTeamMemberMetaShow.push(member);
            }
          }
        }
      })
      .catch((e: any) => {
        if (e && e.status === 500) {
          const url: any = "/500";
          this.$router.push({ path: url });
        } else {
          this.$Notice.error({
            title: "错误",
            desc: e.data.message,
          });
        }
      });
  }

  /**
   * 跳转至项目成员界面
   *
   * @memberof AppProjectinfoHeader
   */
  public toPrjTeam(type?: any) {
    let localContext: any = null;
    let localViewParam: any = null;
    const data: any = {};
    if(type && Object.is(type,'editMember'))
    Object.assign(data,{iseditteam:1})
    let tempContext = JSON.parse(JSON.stringify(this.context));
    Object.assign(tempContext, { project: this.context.project });
    let deResParameters: any[] = [];
    const parameters: any[] = [
      { pathName: "projects", parameterName: "project" },
      { pathName: "prjteammgreditview", parameterName: "prjteammgreditview" },
    ];
    const _this: any = this;
    const openIndexViewTab = (data: any) => {
      const routePath = this.$viewTool.buildUpRoutePath(
        this.$route,
        tempContext,
        deResParameters,
        parameters,
        [],
        data
      );
      this.$router.push(routePath);
    };
    openIndexViewTab(data);
  }
}
</script>
